<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>I'm QQ - 每一天，乐在沟通</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="QQ/index/css/base.css">
    <link rel="stylesheet" href="QQ/index/css/public.css">
    <link rel="stylesheet" href="QQ/index/css/index.css">
    <script src="QQ/index/js/jquery-1.12.4.js"></script>
    <script src="QQ/index/js/index.js"></script>

</head>
<body>

<!--   topbar   部分   start   -->
<div class="topbar" id="topbar">
    <div class="toppic" id="toppic">
        <div class="topside fl">
            <a href="index.html" class="logoLink fl">im.qq.com</a>
            <ul class="topNav fl" id="topNav">
                <li class="current">
                    <a href="index.html">首页</a>
                </li>
                <li>
                    <a href="QQ/download&safety/QQ/download.html">下载</a>
                </li>
                <li>
                    <a href="QQ/album/album.html">动态</a>
                </li>
            </ul>
        </div>
        <div class="topTool fr">
            <a href="#" target="_blank" class="topTool_register fl">注册</a>
            <ul>
                <li>
                    <a href="QQ/qqPC/qqPC.html">登录</a>
                </li>
                <li>
                    <a href="QQ/download&safety/QQ/safety.html">QQ安全</a>
                </li>
                <li>
                    <a href="QQVIP/QQVIP_index/QQVIP_index.HTML">QQ会员</a>
                </li>
            </ul>
            <div class="flashData">
                <a href="#">当前在线人数：<em>217,072,710</em></a>
            </div>
        </div>
    </div>
</div>


<!--   topbar   部分   end   -->


<!--   crossbanner   部分   start   -->
<div class="crossbanenr wrap">
    <ul id="crossbanenr">
        <li class="mbqqbg" id="canvas_cd">
            <div class="bncont">
                <div class="bntxt">
                    <h2>精彩·附近 时刻发现身边趣人趣事</h2>
                    <a class="mobileqq" href="  QQ/QQMobile/QQMobile.html" target="_blank">下载</a>
                </div>
            </div>
        </li>
        <li class="pcqqbg">
            <div class="bncont">
                <div class="bntxt">
                    <h2>QQ pc版7.7 全新视觉，更新、更薄、更高效</h2>
                    <a class="bnxz" href="javascript:void(0);" target="_blank">下载</a>
                </div>
            </div>
        </li>


    </ul>
    <div class="circle">
        <span class="on" id="li_mbqqbg">&nbsp</span>
        <span id="li_pcqqbg">&nbsp</span>
    </div>
</div>

<!--   crossbanner   部分   end   -->

<!--   content   部分   start   -->
<div class="content" id="content">
    <h1>I'm QQ - 每一天，乐在沟通</h1>
    <div id="firstbg" class="activebg firstbg"></div>
    <div class="qfigure qcall">
        <div class="qw960">
            <div class="txtwrap">
                <h2>沟通，是跨越千山万水的亲切声音</h2>
                <p>无论何时何地，你都能自由享受QQ在各类终端<br/>上带来的高清通话，与好友一起想聊多久聊多久</p>
                <p><a class="knmore" href="#" target="_blank">了解更多 &gt;</a></p>
                <ul class="figs">
                    <li class="f01">屏幕分享</li>
                    <li class="f02">群组通话</li>
                    <li class="f03">两人、多人通话</li>
                </ul>
            </div>
            <div class="qcallAnimate">
            </div>
        </div>
    </div>
</div>
<div id="secondbg" class="activebg secondbg"></div>
<div class="qfigure qfile">
    <div class="qw960">
        <div class="txtwrap">
            <h2>沟通，是随时随地爽快收发</h2>
            <p>通过QQ,电脑和手机上的文件都能收发自如，<br/>更有手机在线查阅，轻松你的工作和生活。</p>
            <p><a class="knmore" href="#" target="_blank">了解更多 &gt;</a></p>
            <ul class="figs">
                <li class="f01">文件漫游</li>
                <li class="f02">多端互传</li>
                <li class="f03">在线预览</li>
            </ul>
        </div>
        <div class="qfileAnimate">
        </div>
    </div>
</div>
<div id="thirdbg" class="activebg thirdbg"></div>
<div class="qfigure qblog">
    <div class="qw960">
        <div class="txtwrap">
            <h2>沟通，是志同道合的他们放肆青春</h2>
            <p>即使世界很大，你也不会孤单，在兴趣部落<br/>有和你一样的人，期待着和你一起发现精彩</p>
            <p><a class="knmore" href="#" target="_blank">了解更多 &gt;</a></p>
            <ul class="figs">
                <li class="f01">精彩图集</li>
                <li class="f02">附近热点</li>
                <li class="f03">兴趣社区</li>
            </ul>
        </div>
        <div class="qblogAnimate">
            <div class="qblogWrap" id="qblogWrap">
                <div class="pic1"></div>
                <div class="pic2"></div>
                <div class="pic3"></div>
            </div>
        </div>
    </div>
</div>
</div>

<!--   content   部分   end   -->

<!--   footer   部分   start   -->
<div class="footer">
    <div class="qmaps w">
        <div class="plats">
            <h3>了解热门产品</h3>
            <a href="#" class="mobile">QQ 手机版</a>
            <a href="#" class="pc">QQ PC版</a>
            <a href="#" class="mac">QQ Mac版</a>
            <a href="#" class="pad">QQ Pad版</a>
        </div>
        <dl class="Q_safe">
            <dt>QQ安全</dt>
            <dd><a href="#">安全中心</a></dd>
            <dd><a href="#">冻结帐号</a></dd>
            <dd><a href="#">举报恶意行为</a></dd>
            <dd><a href="#">恢复好友和群</a></dd>
        </dl>
        <dl class="Q_help">
            <dt>帮助反馈</dt>
            <dd><a href="#">腾讯客服</a></dd>
            <dd><a href="#">反馈问题</a></dd>
            <dd><a href="#">腾讯微博</a></dd>
            <dd><a href="#">新浪微博</a></dd>
        </dl>
        <dl class="Q_link">
            <dt>友情链接</dt>
            <dd><a href="#">兴趣部落</a></dd>
            <dd><a href="#">QQ群</a></dd>
            <dd><a href="#">QQ音乐</a></dd>
            <dd><a href="#">QQ浏览器</a></dd>
            <dd><a href="#">来电</a></dd>
            <dd><a href="#">腾讯视频</a></dd>
            <dd><a href="#">腾讯体验中心</a></dd>
            <dd><a href="#">腾讯电脑管家</a></dd>
        </dl>
    </div>


    <div class="copyright">
        <p>Copyright &copy; 1998-
            <script>document.write((new Date()).getFullYear());</script>
            Tencent. All Rights Reserved.
        </p>
        <p>腾讯公司 版权所有</p>
    </div>

</div>

<!--   footer   部分   end   -->



<script src="QQ/index/js/common.js"></script>
<script src="QQ/index/js/animate.js"></script>
<script>
    //topNav  事件
    var topNav = document.getElementById("topNav");
    var lists = topNav.children;
    for (var i = 0; i < lists.length; i++) {
        var li = lists[i];
        li.onmouseover = function () {   //鼠标放上   高亮显示
            for (var i = 0; i < lists.length; i++) {
                var li = lists[i];
                li.removeAttribute("class");
            }
            this.className = "current";
        }

        li.onmouseout = function () {   //鼠标离开  高亮显示回到第一个位置
            for (var i = 0; i < lists.length; i++) {
                var li = lists[i];
                li.removeAttribute("class");
            }
            lists[0].className = "current";
        }
        li.onclick = function () {   //鼠标点击  当前位置高亮显示
            for (var i = 0; i < lists.length; i++) {
                var li = lists[i];
                li.removeAttribute("class");
            }
            this.className = "current";
        }

    }

    //头部移动一定距离   固定在页面顶部
    var topbar = document.getElementById("topbar");
    var content = document.getElementById("content");
    var content_h1 = content.children[0];
    var qblogWrap = document.getElementById("qblogWrap");
    window.onscroll = function () {
        if(getScroll().scrollTop >= content.offsetTop + content_h1.offsetHeight * 0.75) {
            topbar.className = "topbar topicfixed";
        } else {
            topbar.className = "topbar";
        };

        /*qblogWrap  动态效果*/
        if(getScroll().scrollTop >= 3500) {
            $(".pic3").animate({"opacity":1},1000, function () {
                $(".pic2").animate({"opacity":1},500, function (){
                    $(".pic1").animate({"opacity":1},500);
                });
            });
        }

    }

    





</script>
</body>
</html>